﻿<%@ Page Title="Sucursales" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"
        language="javascript"></script>
    <script type="text/javascript" language="javascript">
        // variables
        var map = null;
        var markerSucursal = null;

        var imageUrlSucursal = '../Images/pin_dotnet.png';
        var imageUrlSucursalShadow = '../Images/pin_dotnet_shadow.png';

        // document on ready
        $(function () {

            initMap();
            render();

        });


        function initMap() {

            markerSucursal = new google.maps.MarkerImage(imageUrlSucursal,
                new google.maps.Size(21, 34));

            markerSucursalShadow = new google.maps.MarkerImage(imageUrlSucursalShadow,
                new google.maps.Size(40, 37));

            map = new google.maps.Map(document.getElementById("mapContainer"), {
                center: new google.maps.LatLng(-34.909281, -56.161180),
                zoom: 12,
                minZoom: 1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        }

        function render() {
            var infowindow = null;

            $.ajax({
                type: 'POST',
                url: 'http://localhost:1661/Web/Webservices/SucursalesWS.asmx/getSucursales',
                dataType: 'xml',
                success: function (xml) {
                    var data;
                    $(xml).find('string').each(function () {
                        data = eval("(" + $(this).text() + ')');
                    });
                    var length = data.length;
                    var infowindow = new google.maps.InfoWindow();
                    for (var i = 0; i < length; i++) {
                        var latLng = new google.maps.LatLng(data[i].BranchLatitude, data[i].BranchLongitude);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: latLng,
                            icon: markerSucursal,
                            shadow: markerSucursalShadow,
                            clickable: true,
                            flat: true,
                            title: data[i].BranchName
                        });

                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infowindow.setContent("<u><b>" + data[i].BranchName +
                                                  "</b></u><br />Compras hoy: " + data[i].Purchases);
                                infowindow.open(map, marker);
                            }
                        })(marker, i));
                    }
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Visualización de las sucursales.
    </h2>
    <p>
        A continuación se desplegarán las sucursales de Supermercados .NET en Montevideo
        con el ícono
        <img src="../Images/pin_dotnet.png" height="20" border="0" />. Cada uno tiene información
        sobre las compras realizadas para hoy.</p>
    <div id="mapContainer">
    </div>
    <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="~/Purchases/TotalCompras.aspx">Total Compras</asp:HyperLink>
</asp:Content>
